<template>
  <div class="page">
    <v-pageTitle title="费用项目查询"></v-pageTitle>
    <v-pageHeader>
      <el-button size="small" type="primary" icon="el-icon-download" v-if="hasPermission('导出')" @click="doExport">导出</el-button>
    </v-pageHeader>
    <imp-panel>
      <v-pageSearch v-if="hasPermission('查询')">
        <el-row style="width: 100%;">
          <el-form :inline="true">
            <el-col :span="24">
              <el-form-item label="费用项目名称">
                <el-autocomplete
                  size="small"
                  popper-class="my-autocomplete"
                  v-model="formSearch.name"   
                  :fetch-suggestions="querySearchAsync_id"
                  placeholder="请输入查询关键字"
                  suffix-icon="el-icon-search"
                  @select="handleSelect_id"
                  @blur="getDefault_id"
                >
                  <template slot-scope="props_id">
                    <div class="name">{{ props_id.item.value }}</div>
                    <span class="label">{{ props_id.item.label }}</span>
                  </template>
                </el-autocomplete>
              </el-form-item>
              <el-form-item label="所属费用项目">
                <el-autocomplete
                  size="small"
                  popper-class="my-autocomplete"
                  v-model="formSearch.parentName"   
                  :fetch-suggestions="querySearchAsync_parentId"
                  placeholder="请输入查询关键字"
                  suffix-icon="el-icon-search"
                  @select="handleSelect_parentId"
                  @blur="getDefault_parentId"
                >
                  <template slot-scope="props_parentId">
                    <div class="name">{{ props_parentId.item.value }}</div>
                    <span class="label">{{ props_parentId.item.label }}</span>
                  </template>
                </el-autocomplete>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </v-pageSearch>
    
      <v-pageTable pagination :sizeChange="sizeChange" :pageChange="pageChange" :paginationTotal="paginationTotal" paginationAlign="right">
        <el-table size="small" v-loading="table.loading" stripe
          :data="table.body" style="width: 100%" @selection-change="selsChange" 
          :header-row-style='headerBg' :header-cell-style="headerBg"
          :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column prop="chargeItemCode" label="费用项目编号" min-width="150" sortable>
          </el-table-column>
          <el-table-column prop="chargeItemName" label="费用项目名称" min-width="150" sortable>
          </el-table-column>
          <el-table-column prop="parentName" label="所属费用项目" min-width="150" sortable>
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="150" sortable>
          </el-table-column>
          <el-table-column prop="createByName " label="创建人" min-width="150" sortable>
          </el-table-column>
          <el-table-column prop="createTime " label="创建时间" min-width="150" sortable>
            <template slot-scope="scope">
              {{getName_date(scope.row.createTime)}}
            </template>
          </el-table-column>
          <el-table-column prop="modifyByName " label="最后修改人" min-width="150" sortable>
          </el-table-column>
          <el-table-column prop="modifyTime" label="最后修改时间" min-width="150" sortable>
            <template slot-scope="scope">
              {{getName_date(scope.row.modifyTime)}}
            </template>
          </el-table-column>
        </el-table>
      </v-pageTable>
    </imp-panel>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'Vuex'
import panel from "@/components/common/panel.vue"
import util from '@/util/util'
export default {
  components: {
    'imp-panel': panel
  },
  data() {
    return {
      table: {
          loading: true,
          body: [],
          page: 1,
          pageSize: 10
      },
      formSearch:{
        id:'',
        name: '',
        parentId: '',
        parentName: ''
      },
      // 模糊查询借助字段 存储上次点选的字段
      value_id:'',
      value_parentId: '',
      value_name:'',
      value_parentName: '',

      paginationTotal: 0,
      sels:[]
    }
  },
  filters: {
    statusFilter(statue) {
      let sta = statue ? 1 : 0;
      let statusMap = ['禁用','启用']
      return statusMap[sta]
    },
    statusFilterType(statue) {
      let sta = statue ? 1 : 0;
      let statusMapType = ['success','error']
      return statusMapType[sta]
    }
  },
  methods: {
    // 监控分页数据变化
    currentPage(data){
        this.$store.commit("currentPage", data)
    },
    headerBg: function(row){
      return { "background": "#EEF1F6","color":"#1F2D3D" };
    },
    // 导出
    doExport(){
      let params = {
        "mapSearch":{
          "id": this.formSearch.id,
          "parentId": this.formSearch.parentId
        },
        "type": 'ExportChargeItem'
      };
      let this_ = this;
      let paramsStr = JSON.stringify(params);
      window.location.href = "/api/export/do?data="+encodeURI(paramsStr);
    },
    onSearch(){
      this.pageChange(1,'page')
      this.currentPage(1)
    },
    getTableData(val,flag) {
      // ajax 查询表格数据
      let this_ = this;
      this_.table.loading = true;
      let url = 'chargeItem/list';
      if(flag==='pageSize'){
        this.table.pageSize = val;
      }else if(flag==='page'){
        this.table.page = val;
      };
      
      let params = {
        "page": this.table.page,
        "pageSize": this.table.pageSize,
        "id": this.formSearch.id,
        "parentId": this.formSearch.parentId
      };
      util.httpJesen(url,params,function(data){
          this_.table.body = data.data.records;
          this_.paginationTotal = data.data.total;
          this_.table.loading = false;
      });
    },
    //日期处理
    getName_date(date){
      if(date){
        return util.formatDate.format(new Date(date), 'yyyy-MM-dd')
      }
    },
    sizeChange(val){
      this.getTableData(val,'pageSize')
    },
    pageChange(val){
      this.getTableData(val,'page')
      this.currentPage(val)
    },
    selsChange: function (sels) {
      console.log(sels)
      this.sels = sels;
    },
    // 远程搜索
    //queryString 为在框中输入的值  
    //callback 回调函数,将处理好的数据推回 
    querySearchAsync_id(queryString, callback) {  
      var list = [];  
      let this_ = this;
      let url ='chargeItem/getChargeItem';  
      //从后台获取到对象数组  
      
      let params = {
        "name" : this.formSearch.name
      };
      if(this.formSearch.name){
        util.httpJesenGet(url,params,function(data){
          //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示  
          if(data.data){
            for(let i of data.data){  
                i.value = i.chargeItemName;  //将companyName作为value  
                i.label = i.chargeItemCode; 
            }  
            list = data.data;  
            callback(list);  
          }
        });
      }else{
        this.formSearch.name = ""; 
        this.formSearch.id = "";
        list = [];  
        callback(list);  
      }
    },
    handleSelect_id(item) {  
      this.formSearch.id = item.id;
      this.formSearch.name = item.chargeItemName;
      this.value_id = item.id;
      this.value_name = item.chargeItemName;
    }, 
    getDefault_id(){
      if(this.formSearch.name==''){
        this.formSearch.id = '';
      }else{
        this.formSearch.name = this.value_name;
        this.formSearch.id = this.value_id;
      }
    },
    querySearchAsync_parentId(queryString, callback) {  
      var list = [];  
      let this_ = this;
      let url ='chargeItem/getChargeItem';  
      //从后台获取到对象数组  
      let params = {
        "name" : this.formSearch.parentName
      };
      if(this.formSearch.parentName){
        util.httpJesenGet(url,params,function(data){
          //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示  
          if(data.data){
            for(let i of data.data){  
                i.value = i.chargeItemName;  //将companyName作为value  
                i.label = i.chargeItemCode; 
            }  
            list = data.data;  
            callback(list);  
          }
        });
      }else{
        this.formSearch.parentId = "";
        this.formSearch.parentName = "";
        list = [];  
        callback(list);  
      }
      
    },
    handleSelect_parentId(item) {  
      this.formSearch.parentId = item.id;
      this.formSearch.parentName = item.chargeItemName;
      this.value_parentId = item.id;
      this.value_parentName = item.chargeItemName;
    },
    getDefault_parentId(){
      if(this.formSearch.parentName==''){
        this.formSearch.parentId = '';
      }else{
        this.formSearch.parentName = this.value_parentName;
        this.formSearch.parentId = this.value_parentId;
      }
    },
  },
  mounted() {
      // 获取table数据
      this.onSearch();
  },
  beforeDestory(){

  }
}
</script>
<style lang="scss" scoped>
.my-autocomplete {
  li {
    line-height: 12px;
    padding: 2px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
      height:24px;
    }
    .label {
      font-size: 12px;
      color: #1381B8;
    }

    .highlighted .label {
      color: #ddd;
    }
  }
}
</style>
